import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: new MyHomePage(title: 'flutter_html Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

const priHtmlData = """
<container>
    <title>关于穿戴助手隐私声明</title>
    <update-time>最近更新日期：2020年10月</update-time>
    <content>
        本隐私声明仅适用于深圳市致璞科技有限公司(以下称“我们”或“致璞”)为您提供的“穿戴助手”应用服务，包括设备绑定、运动数据、健康数据等服务。
    </content>
    <content>
        本隐私声明将帮助您了解以下内容：
        <br>
        1.我们如何收集和使用您的个人信息
        <br/>
        2.我们如何转让、公开披露您的个人信息
        <br/>
        3.我们如何保护您的个人信息
        <br/>
        4.您的权力
        <br/>
        5.我们如何处理儿童的个人信息
        <br/>
        6.数据存储地点及期限
        <br/>
        7.本隐私声明如何更新
        <br/>
        8.如何联系我们
    </content>
    <content>
        我们深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最小必要原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺，将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。请在使用我们的产品（或服务）前，仔细阅读并了解本隐私声明。
    </content>
    <subtitle>
        1.我们如何收集和使用您的个人信息
    </subtitle>
    <content>
        个人信息是指以电子或者其他方式记录的，能够单独或者与其他信息结合来识别特定自然人身份或者反映特定自然人活动情况的各种信息。
    </content>
    <content>“穿戴助手”应用是用于记录和分析用户运动和健康数据，为了提供运动健康服务，还需收集、使用您的个人信息，本声明所称个人信息包含设备和网络信息、个人资料、运动数据和健康数据，我们仅会出于本声明所述的以下目的，收集和使用您的个人信息：</content>
    <content>(1)手表设备的绑定</content>
    <content>为了支持您手表设备与应用的绑定，我们可能收集您的手表设备的标识信息、手机设备的标识信息、手机型号、系统版本号、手表的蓝牙信息。</content>
    <content>(2)个人资料</content>
    <content>包括您的体重，该信息能帮助更加准确地计算运动数据。</content>
    <content>(3)运动数据</content>
    <content>包括设备位置、运动轨迹、运动类型、运动时长、步数、距离、卡路里、运动心率和计算出来的分析数据，这些数据被用来为用户存储和展示。</content>
    <content>(4)健康数据</content>
    <content>包括睡眠、心率、压力、血氧等，这些数据被用来为用户存储和展示。</content>
    <content>为了保护致璞、您或其他致璞客户的权利，我们会根据以上收集的信息，进行风险控制，防止欺诈等违法活动。若您不提供这类信息，我们可能无法为您提供完整的上述服务。</content>

    <subtitle>
        2.我们如何转让、公开披露您的个人信息
    </subtitle>
    <content>(1)转让</content>
    <content>我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：</content>
    <content>a)在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息；</content>
    <content>b)在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受此隐私声明的约束，否则我们将要求该公司、组织重新向您征求授权同意。</content>
    <content>(2)公开披露</content>
    <content>我们仅会在以下情况下，公开披露您的个人信息：</content>
    <content>a)获得您明确同意后;</content>
    <content>b)基于法律的披露：在法律、法律程序、诉讼或政府主管部门强制性要求的情况下，我们可能会公开披露您的个人信息。</content>

    <subtitle>
        3.我们如何保护您的个人信息
    </subtitle>
    <content>我们将使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，确保未收集无关的个人信息。我们只会在达成本声明所述目的所需的期限内保留您的个人信息，除非需要延长保留期或受到法律的允许。</content>
    <content>互联网环境并非百分之百安全，我们将尽力确保或担保您发送给我们的任何信息的安全性。如果我们的物理技术或管理防护设施遭到破坏，导致信息被非授权访问、公开披露、篡改或毁坏，我们将按照法律法规的要求，及时向您告知安全事件的基本情况和可能的影响、我们己采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会釆取合理、有效的方式发布公告。</content>
    <content>同时，我们还将按照监管部门要求，主动上报个人信息安全事件的处置情况。</content>
    <subtitle>
        4. 您的权利
    </subtitle>
    <content>您可以前往“设备”>“关于穿戴助手“>“隐私声明“>点击“不同意此隐私声明“来撤销授权。</content>
    <content>如您对您的数据主体权利有进一步要求或存在任何疑问、意见或建议，可通过本声明中“如何联系我们”章节中所述方式与我们取得联系，并行使您的相关权利。</content>
    <content>为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求。我们将尽快作出答复。</content>
    <content>对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情况收取一定成本费用。对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者非常不切实际的请求，我们可能会予以拒绝。</content>
    <content>在以下情形中，我们将无法响应您的请求：</content>
    <content>a)与个人信息控制者履行法律法规规定的义务相关的；</content>
    <content>b)与国家安全、国防安全直接相关的；</content>
    <content>c)与公共安全、公共卫生、重大公共利益直接相关的；</content>
    <content>d)与刑事侦查、起诉、审判和执行判决等直接相关的；</content>
    <content>e)个人信息控制者有充分证据表明个人信息主体存在主观恶意或滥用权利的；</content>
    <content>f)岀于维护个人信息主体或其他个人的生命、财产等重大合法权益 但又很难得到本人同意的；</content>
    <content>g)响应个人信息主体的请求将导致个人信息主体或其他个人、组织的合法权益受到严重损害的；</content>
    <content>h)涉及商业秘密的。</content>

    <subtitle>
        5.我们如何处理儿童的个人信息
    </subtitle>
    <content>本应用仅供成年人使用。如果没有父母或监护人的同意，儿童不应创建自己的个人信息主体账户。父母和监护人也应采取适当的预防措施来保护儿童，包括监督其对本应用的使用。</content>
    <content>尽管各地法律和习俗对儿童的定义不同，但我们将不满14周岁的任何人均视为儿童。</content>
    <content>对于经父母同意而收集儿童个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护儿童所必要的情况下使用或公开披露此信息。</content>

    <subtitle>
        6.数据存储地点及期限
    </subtitle>
    <content>(1)数据存储地点</content>
    <content>如果您是中国大陆的用户，我们在本服务项下收集和产生的个人信息将存储在位于中国大陆的服务器上；如果您是中国大陆以外的其他国家或地区的用户，您的数据会存储在位于新加坡的服务器上。</content>
    <content>(2)数据存储期限</content>
    <content>我们仅在实现目的所需的时间内保留您的个人信息。当您同意使用智能短信增强服务、服务号并同意其隐私声明，我们将采集上述提到的个人信息并保存一年。</content>
    <content>在超出数据保留期后，若您不再使用我们的产品，我们会在合理的期限内对您的数据进行删除或匿名化处理，但法律法规另有要求的除外；若您仍在使用我们的产品，我们将会在法律的允许下自动延续1年保留期，以便继续提供更专业运动健康服务。此外，当我们产品或服务停止运营的情况下，我们将会以推送通知、公告、弹窗等形式通知您，并在合理的期限内删除您的个人信息或进行匿名化处理。</content>

    <subtitle>
        7.本隐私声明如何更新
    </subtitle>
    <content>我们的隐私声明可能变更。</content>
    <content>未经您明确同意，我们不会削减您按照本隐私声明所应享有的权利。</content>
    <content>对于重大变更，我们还会提供更为显著的通知（包括网站公示、弹窗提示等方式）。本声明所指的重大变更包括但不限于：</content>
    <content>a)我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；</content>
    <content>b)我们在所有权结构、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更等；</content>
    <content>c)个人信息共享、转让或公开披露的主要对象发生变化；</content>
    <content>d)您参与个人信息处理方面的权利及其行使方式发生重大变化；</content>
    <content>e)我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</content>
    <content>f)个人信息安全影响评估报告表明存在高风险时。</content>
    <subtitle>
        8.如何联系我们
    </subtitle>
    <content>我们设立了个人信息保护专职部门(或个人信息保护专员)，如果您对本隐私声明有任何疑问、意见或建议，请通过以下联系邮箱与我们联系:suggest@zhipu-inc.com，我们会尽快回复。
    </content>
    <content>如果您对我们的回复不满意，特别是当我们的个人信息处理行为损害了您的合法权益时，您还可以通过向有管辖权的人民法院提起诉讼、向行业自律协会或政府相关管理机构投诉等外部途径进行解决。您也可以向我们了解可能适用的相关投诉途径的信息。</content>
    <content>&nbsp;</content>
    <content>&nbsp;</content>
    <content>&nbsp;</content>
</container>
""";

const htmlData = """
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h3>Ruby Support:</h3>
      <p>
        <ruby>
          漢<rt>かん</rt>
          字<rt>じ</rt>
        </ruby>
        &nbsp;is Japanese Kanji.
      </p>
      <h3>Support for <code>sub</code>/<code>sup</code></h3>
      Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
      <p>One of the most <span>common</span> equations in all of physics is <br /><var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
      <h3>Inline Styles:</h3>
      <p>The should be <span style='color: blue;'>BLUE style='color: blue;'</span></p>
      <p>The should be <span style='color: red;'>RED style='color: red;'</span></p>
      <p>The should be <span style='color: rgba(0, 0, 0, 0.10);'>BLACK with 10% alpha style='color: rgba(0, 0, 0, 0.10);</span></p>
      <p>The should be <span style='color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
      <p>The should be <span style='background-color: red; color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
      <p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
      <p style="text-align: right;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
      <p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
      <p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
      <h3>Table support (with custom styling!):</h3>
      <p>
      <q>Famous quote...</q>
      </p>
      <table>
      <colgroup>
        <col width="50%" />
        <col span="2" width="25%" />
      </colgroup>
      <thead>
      <tr><th>One</th><th>Two</th><th>Three</th></tr>
      </thead>
      <tbody>
      <tr>
        <td rowspan='2'>Rowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan</td><td>Data</td><td>Data</td>
      </tr>
      <tr>
        <td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
      </tr>
      </tbody>
      <tfoot>
      <tr><td>fData</td><td>fData</td><td>fData</td></tr>
      </tfoot>
      </table>
      <h3>Custom Element Support (inline: <bird></bird> and as block):</h3>
      <flutter></flutter>
      <flutter horizontal></flutter>
      <h3>SVG support:</h3>
      <svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
            <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
            <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
            <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
      </svg>
      <h3>List support:</h3>
      <ol>
            <li>This</li>
            <li><p>is</p></li>
            <li>an</li>
            <li>
            ordered
            <ul>
            <li>With<br /><br />...</li>
            <li>a</li>
            <li>nested</li>
            <li>unordered
            <ol>
            <li>With a nested</li>
            <li>ordered list.</li>
            </ol>
            </li>
            <li>list</li>
            </ul>
            </li>
            <li>list! Lorem ipsum dolor sit amet.</li>
            <li><h2>Header 2</h2></li>
            <h2><li>Header 2</li></h2>
      </ol>
      <h3>Link support:</h3>
      <p>
        Linking to <a href='https://github.com'>websites</a> has never been easier.
      </p>
      <h3>Image support:</h3>
      <p>
        <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
        <a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
      </p>
      <h3>Video support:</h3>
      <video controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
      </video>
      <h3>Audio support:</h3>
      <audio controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
      </audio>
""";

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('flutter_html Example'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Html(
          data: priHtmlData,
          //Optional parameters:
          style: {
            "html": Style(
              backgroundColor: Colors.white,
//              color: Colors.white,
            ),
            "title": Style(
              alignment: Alignment.center,
              textAlign: TextAlign.center,
              fontSize: FontSize(18),
              fontWeight: FontWeight.bold,
              margin: EdgeInsets.only(bottom: 4),
              display: Display.BLOCK,
            ),
            "update-time": Style(
              alignment: Alignment.center,
              textAlign: TextAlign.center,
              fontSize: FontSize(14),
              margin: EdgeInsets.only(bottom: 4),
              display: Display.BLOCK,
            ),
            "subtitle": Style(
              alignment: Alignment.center,
              fontSize: FontSize(16),
              fontWeight: FontWeight.bold,
              margin: EdgeInsets.only(bottom: 4),
              display: Display.BLOCK,
            ),
            "container": Style(
              padding: EdgeInsets.only(left: 4, right: 4),
              display: Display.BLOCK,
            ),
            "content": Style(
                alignment: Alignment.center,
                fontSize: FontSize(14),
                margin: EdgeInsets.symmetric(vertical: 6),
                display: Display.BLOCK,
                color: Color(0xcc000000))
          },
          onLinkTap: (url) {
            print("Opening $url...");
          },
        ),
      ),
    );
  }
}
